class S2.FX.Morph
Description
"Morph" DOM elements to a new set of CSS style rules, while optionally providing a new set of contents.
Preferred syntax
It is recommended to use the shorthand syntax, for example:
$('element_id').morph('width:300px;color:#fff', { duration: .7 });
Supported CSS properties
The following CSS properties are supported by this effect:
background-color (color), border-bottom-color (color),
border-bottom-width (length), border-left-color (color),
border-left-width (length), border-right-color (color),
border-right-width (length), border-spacing (length),
border-top-color (color), border-top-width (length),
bottom (length), color (color), font-size (length),
font-weight (integer), height (length), left (length),
letter-spacing (length), line-height (length),
margin-bottom (length), margin-left (length), margin-right (length),
margin-top (length), max-height (length), max-width (length),
min-height (length), min-width (length), opacity (number),
outline-color (color), outline-offset (length),
outline-width (length), padding-bottom (length),
padding-left (length), padding-right (length), padding-top (length),
right (length), text-indent (length), top (length), width (length),
word-spacing (length), z-index (integer) and zoom (number).
In addition, shorthand CSS properties for these also work:
$('element_id').setStyle('border:2px solid #cba;border-bottom-width:100px');
$('element_id').morph('border:12px solid #abc', { duration: .7 });
It is also possible to specify a S2.FX.Transition for some or all CSS properties individually for complex animation effects:
$('element_id').morph('top:20px;left:50px;background-color:#000',{
transition: 'easeInOutExpo',
propertyTransitions: {
top: 'spring', left: 'easeInOutCirc'
}
});
These transitions are in addition to the main effect transition.